<template>
  <a-modal
    :title="$t('批量修改')"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    :okText="$t('保存')"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
    v-drag
  >
    <a-form class="batchForm">
      <a-form-item :label="$t('修改选择的属性')" :labelCol="{ span: 7 }" :wrapperCol="{ span: 15 }">
        <a-select v-model="model.attr" @change="handleChange" :placeholder="$t('请选择')">
          <a-select-option v-for="(item, key) in attribute" :key="key" :value="item.value">
            <span style="display: inline-block; width: 100%" :title="item.title">
              {{ item.title }}
            </span>
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="model.attr === 'state'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-dict-select-tag
          type="list"
          v-model="model.state"
          dictCode="bis_device_info.state"
          :placeholder="$t('请选择管理状态')"
        />
      </a-form-item>
      <a-form-item
        v-if="model.attr === 'game'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <a-select
          showSearch
          v-model="model.game"
          :placeholder="$t('请输入项目编码/名称')"
          :defaultActiveFirstOption="false"
          :showArrow="false"
          :filterOption="false"
          @search="getGoodsList"
          @change="handleChangeGame"
        >
          <a-select-option v-for="d in gameList" :key="d.id" :value="d.id">{{ d.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-model-item
        v-if="model.attr === 'game' && outputType == 4"
        :label="$t('绑定仓库')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-tree-select
          :placeholder="$t('请选择')"
          v-model="model.store"
          dict="bis_goods_store,name,id"
          pid-field="pid"
          pidValue="0"
          hasChildField="has_child"
        ></j-tree-select>
      </a-form-model-item>
      <a-form-item
        v-if="model.attr === 'ktType'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-dict-select-tag
          type="list"
          v-model="model.ktType"
          dictCode="bis_device_info.kt_type"
          :placeholder="$t('请选择')"
        />
      </a-form-item>
      <a-form-item
        v-if="model.attr === 'qrType'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-dict-select-tag
          type="list"
          v-model="model.qrType"
          dictCode="bis_device_info.qr_type"
          :placeholder="$t('请选择')"
        />
      </a-form-item>
      <a-form-item
        v-if="model.attr === 'logoFlag'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-dict-select-tag
          type="list"
          v-model="model.logoFlag"
          dictCode="is_display"
          :placeholder="$t('请选择是否显示商家Logo')"
        />
      </a-form-item>
      <a-form-item
        v-if="model.attr === 'helpFlag'"
        :label="$t('修改属性为')"
        :labelCol="{ span: 7 }"
        :wrapperCol="{ span: 15 }"
      >
        <j-dict-select-tag
          type="list"
          v-model="model.helpFlag"
          dictCode="is_display"
          :placeholder="$t('请选择')"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getAction, putAction } from '@/api/manage'

export default {
  name: 'BatchEditModal',
  data() {
    return {
      width: 600,
      visible: false,
      deviceIds: [],
      attribute: [
        {
          title: this.$t('管理状态'),
          value: 'state',
        },
        {
          title: this.$t('绑定项目'),
          value: 'game',
        },
        {
          title: this.$t('应用模式'),
          value: 'ktType',
        },
        {
          title: this.$t('二维码类型'),
          value: 'qrType',
        },
        {
          title: this.$t('商家Logo'),
          value: 'logoFlag',
        },
        {
          title: this.$t('帮助功能'),
          value: 'helpFlag',
        },
      ],
      model: {},
      queryList: [],
      gameList: [],
      outputType: '',
    }
  },
  methods: {
    edit(datas) {
      this.deviceIds = datas
      this.model={}
      this.queryList = []
      this.gameList = []
      this.outputType = ''
      this.visible = true
    },
    handleChange(e) {
      if (e == 'game') {
        this.getGoodsList()
      }
    },
    getGoodsList(info) {
      let that = this
      that.gameList = []
      let querydata = {}
      querydata.state = 'Y'
      querydata.pageIndex = 1
      querydata.pageSize = 20
      querydata.gameInfo = info
      getAction('/game/bisGame/list', querydata).then((res) => {
        if (res.success) {
          that.gameList = res.result.records
        }
      })
    },
    handleChangeGame(e) {
      this.gameList.forEach((item) => {
        if (item.id == e) {
          this.outputType = item.outputType
        }
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let that = this
      if (that.model.attr == '') {
        that.$message.warn(that.$t('请选择需要修改的属性'))
        return
      }
      if (that.model.attr == 'state' && !that.model.state) {
        that.$message.warning(that.$t('请选择管理状态'))
        return
      }
      if (that.model.attr == 'game' && !that.model.game) {
        that.$message.warning(that.$t('请选择绑定项目'))
        return
      }
      if (that.model.attr == 'ktType' && !that.model.ktType) {
        that.$message.warning(that.$t('请选择卡头模式'))
        return
      }
      if (that.model.attr == 'qrType' && !that.model.qrType) {
        that.$message.warning(that.$t('请选择二维码类型'))
        return
      }
      that.deviceIds.forEach((item) => {
        let aa = {}
        aa[that.model.attr] = that.model[that.model.attr]
        aa.id = item
        if(that.model.attr==='game'&&that.outputType==4&&that.model.store){
          aa.store=that.model.store
        }
        that.queryList.push(aa)
      })
      putAction('/device/bisDeviceInfo/updateBatch', that.queryList).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.visible = false
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
          that.queryList = []
        }
      })
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style>
.batchForm .ant-form-item-label {
  width: 20%;
}
.batchForm .ant-form-item-control-wrapper {
  width: 62.5%;
}
</style>